<template>
	<!-- 添加收货地址 -->
	<view class="bg-white" style="height: 100vh;">
		<view class="Add_address bg-white">
			<view class="name flex align-center">
				<text>姓名：</text>
				<input type="text" :value="name" placeholder="请输入收货人姓名" @input="handleName">
			</view>
			<view class="name flex align-center">
				<text>电话：</text>
				<input type="number" :value="phone" placeholder="请输入收货人电话" @input="handlePhone" maxlength="11">
			</view>
			<view class="name  flex align-center">
				<text>所在地区：</text>
				<picker mode="region"  @change="handleADD"   >
					<view class="flex-cb  Price" :class="{Price2:province !== ''}">
						<text>{{province?province+city+district:'请选择收货地区'}}</text>
						<text class="cuIcon-right"></text>
					</view>
				</picker>
			</view>
			<view class="name _address flex ">
				<text>详细地址：</text>
				<textarea type="text" :value="address" placeholder="请输入详细地址 " @input="handleAddress"></textarea>
			</view>
			<view class="name flex-cb"  @click="handleDF">
				<text>默认地址：</text>
				<image src="/static/s1.png" mode=""  v-if="is_default" ></image>
				<image src="/static/s2.png" mode=""  v-else ></image>
			</view>
			<view class="foot" :class="{foot2:adddata.name  }" @click="handleDelete" v-if="adddata.name">删除地址</view>
		</view>
		<view class="button flex-c" @click="handleBC">保存</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				adddata:{},
				name:'',
				phone:'',
				province:'',
				city:'',
				district:'',
				address:'',
				is_default:1,
				lng:'',
				lat:''
			};
		},
		onLoad(e) {
			this.location()
			if(e.e){
				this.adddata = JSON.parse(e.e)
				this.name = this.adddata.name
				this.phone = this.adddata.phone
				this.province = this.adddata.province
				this.city = this.adddata.city
				this.district = this.adddata.district
				this.address = this.adddata.address
				this.is_default = this.adddata.is_default
			}
			console.log(this.adddata);
		},
		methods:{
			handleName(e){
				this.name = e.detail.value
			},
			handlePhone(e){
				this.phone = e.detail.value
			},
			handleADD(e){
				this.province = e.detail.value[0]
				this.city = e.detail.value[1]
				this.district = e.detail.value[2]
			},
			handleAddress(e){
				this.address = e.detail.value
			},
			location(){
				let that = this
				uni.getLocation({
					success:(res)=>{
						that.lng = res.longitude
						that.lat = res.latitude
						console.log(res.longitude,res.latitude ,'经纬度');
					}
				})
			},
			handleDF(){
				if(this.is_default==0){
					this.is_default = 1
				}else{
					this.is_default = 0
				}
			},
			handleBC(){//保存
				
				if(this.name == ''){
					this.$utils.tips('请输入姓名')
					return
				}
				if(this.phone == ''){
					this.$utils.tips('请输入手机号')
					return
				}
				if(this.province == ''){
					this.$utils.tips('请选择收货地区')
					return
				}
				if(this.address == ''){
					this.$utils.tips('请输入公司详细地址')
					return
				}
				if(this.lat == '' && this.lng == ''){
					let that = this
					uni.showModal({
						title:'提示',
						content:'未获取到您的定位信息，请开启定位后重试',
						success(res) {
							if(res.confirm){
								that.location()
							}
						}
					})
					return
				}
				if(!this.adddata.name){//创建收货地址
					this.$api.addresses({
						name:this.name,
						phone:this.phone,
						province:this.province,
						city:this.city,
						district:this.district,
						address:this.address,
						is_default:this.is_default,
						lng:this.lng,
						lat:this.lat
					},true).then(res=>{
						if(res.code == 200001){
							this.back()
						}
					})
				}else{
					this.$api.Address_change({
						name:this.name,
						phone:this.phone,
						province:this.province,
						city:this.city,
						district:this.district,
						address:this.address,
						is_default:this.is_default,
						lng:this.lng,
						lat:this.lat
					},this.adddata.id,true).then(res=>{
						if(res.code == 200001){
							this.back()
						}
					})
				}
			},
			back(){
				this.$utils.tips('成功')
				uni.navigateBack({
					delta:1,
					animationDuration:500
				})
			},
			handleDelete(){
				if(this.adddata !== {}){
					uni.showModal({
						confirmColor:'#1CD699',
						title:'删除地址',
						content:'是否确认删除此地址吗？',
						success:(res)=>{
							if (res.confirm) {
								this.$api.Address_delete({},this.adddata.id,true).then(res=>{
									if(res.code == 200001){
										this.$utils.tips('删除成功')
										uni.navigateBack({
											delta:1,
											animationDuration:500
										})
									}
								})
							} 
						}
					})
				}
				
			}
		},
		
	}
</script>

<style lang="scss">
.Add_address{
	margin-top: 1rpx;
	padding: 0 25rpx;
	.name{
		height: 97rpx;
		width: 700rpx;
		padding-left: 9rpx;
		border-bottom: 1px solid #EAEAEA;
		font-size: 26rpx;
		text{
			font-size: 28rpx;
			font-weight: bold;
			width: 140rpx;
			margin-right: 18rpx;
		}
		input{
			font-size: 26rpx;
		}
		.Price{
			color: #999;
			width: 526rpx;
			text{
				white-space: nowrap;
			}
			.cuIcon-right{
				text-align: right;
			}
		}
		.Price2{
			color: #3A3A3A;
		}
	}
	image{
		width: 104rpx;height: 60rpx;
	}
	._address{
		height: 150rpx;
		// padding-bottom: 78rpx;
		padding-top: 35rpx;
		textarea{
			font-size: 26rpx;
			height: 100%;
			flex: 1;
		}
	}
	.foot{
		text-align: right;
		padding: 30rpx 32rpx 0 0;
		font-size: 26rpx;
		color: #ccc;
	}
	.foot2{
		color: #FF2E2E;
	}
}
.button{
	width: 690rpx;
	height: 80rpx;
	background: #1CD699;
	border-radius: 80rpx;
	color: #fff;
	font-size: 30rpx;
	position: absolute;
	left: 30rpx;
	bottom: 30rpx;
}
</style>
